<template>
  <div>
    <div
      style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 20px;
        text-align: center;
      "
    >
      产品类目
    </div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <div
      style="
        flex-wrap: wrap;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
        v-for="(i, index) in categorys"
        :key="index"
        style="
          width: calc((100vw - 130px) / 2);
          margin-right: 10px;
          margin-bottom: 10px;
          border-radius: 15px;
          text-align: center;
          padding: 20px;
        "
        :style="{
          border: `1px solid ${i.color}`,
          backgroundColor: i.color,
          backgroundSize: cover,
        }"
      >
        <div>
          <img :src="i.img" style="border-radius: 15px; width: 100%" />
        </div>
        <div>
          <span>{{ i.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";
const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let categorys = useUserStore.categorys;
</script>
